<style>
    .row {
        padding-bottom: 60px;
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 10px;
    }

    .tab-link {
        font-size: 0.7rem !important;
    }

    .col-50 {

        height: 8rem !important;
        width: 50% !important;
        margin-left: 0 !important;
    }

    .card {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        margin: 0.3rem !important;
    }

    .card-header {
        border: 4px #ffffff solid;
        padding: 5px !important;
        height: 5rem;
        background-position: center center !important;
        background-size: cover !important;
    }

    .titles {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .card-content {
        padding: 0 5px;
    }

    .card-header img {
        max-width: 100%;
        max-height: 100%;
    }

</style>
<header class="bar bar-nav" style="box-shadow:none;  background: url(img/search.png )no-repeat center center /cover;">

    <h1 style="color: black" class='title'>食谱</h1>
</header>
<div class="content infinite-scroll index-content">

    <div class="buttons-tab">
        <a class="tab-link button active" ng-click="filter(0)">全部</a>
        <a class="tab-link button " ng-click="filter('养生粥')">养生粥</a>
        <a class="tab-link button" ng-click="filter('养生汤')">养生汤</a>

        <a class="tab-link button" ng-click="filter('养生茶')">养生茶</a>
        <a class="tab-link button" ng-click="filter('养生酒')">养生酒</a>
    </div>


    <div class="row">
        <div class="col-50" ng-repeat=" data in list" ng-click="turndataRecipes(data)" ng-if="data.state==state||state==0">
            <div class="card demo-card-header-pic" >
                <div valign="bottom" class="card-header color-white no-border no-padding"
                     style="background:url({{data.img.split(',')[0]}}) ">

                </div>


                <div class="card-content titles" style="font-size: 14px">
                    {{data.title}}
                </div>
                <div class="card-content color-gray" style="font-size: 12px">
                    发表于 {{data.time}}
                </div>
            </div>
        </div>


    </div>
    <!--加载提示符 -->
    <!--<div class="infinite-scroll-preloader hidden">-->
    <!--<div class="preloader"></div>-->
    <!--</div>-->

</div>

<div ng-init="suiMobileInit(true)"></div>
<nav class="bar bar-tab">
    <a class="tab-item external " href="javascript:app.turnHref('index.html','#index','index.html#index');">
        <span class="icon icon-home"></span>
        <span class="tab-label">首页</span>
    </a>
    <a class="tab-item external" href="javascript:app.turnHref('index.html','#index','index.html#search');">
        <span class="icon icon-search"></span>
        <span class="tab-label">搜索</span>
    </a>
    <a class="tab-item external" href="javascript:app.turnHref('index.html','#index','index.html#consult');">
        <span class="icon icon-emoji"></span>
        <span class="tab-label">咨询</span>
    </a>

    <a class="tab-item external active"
       href="javascript:app.turnHref('index.html','#index','index.html#recipes');">
        <span class="icon icon-star"></span>
        <span class="tab-label">食谱</span>
    </a>
    <a class="tab-item external" href="javascript:app.turnHref('index.html','#index','index.html#mine');">
        <span class="icon icon-me"></span>
        <span class="tab-label">用户</span>
    </a>
</nav>